<template>
  <div class="app-container">
    <div class="top">
      <el-card class="user">
        <h1>团长:</h1>
        <div v-if="group.user">
          <div class="avatar" v-if="group.user.avatar">
            <el-image :src="group.user.avatar" lazy :fit="'cover'" :preview-src-list="[group.user.avatar]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <p>ID: {{ group.user.id }}</p>
          <p>电话: {{ group.user.mobile }}</p>
          <p v-if="group.user.nickname">昵称: {{ group.user.nickname }}</p>
        </div>
      </el-card>
      <el-card class="product" v-if="item.product">
        <h1>拼团商品:</h1>
        <div class="main-image" v-if="item.product.mainImage">
          <el-image
            :src="item.product.mainImage.thumbnail_path"
            lazy
            :fit="'cover'"
            :preview-src-list="[item.product.mainImage.path]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
        <p class="title">{{ item.product.title }}</p>
<!--        <p class="quantity">数量: {{ item.quantity }}</p>
        <p class="sku" v-if="item.selected_sku_text && item.selected_sku_text !== 'null'">
          规格: {{ JSON.parse(item.selected_sku_text).join(', ') }}
        </p>-->
      </el-card>
    </div>
    <el-card>
      <h1>订单列表:</h1>
      <el-table
        v-if="group.fans"
        :data="group.fans"
        :border="false"
        fit
        style="width: 100%;"
      >

        <el-table-column label="ID">
          <template slot-scope="{row}">
            <span>{{ +row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户ID" width="100">
          <template slot-scope="{row}">
            <span>{{ row.user_id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="图象" width="100" align="center">
          <template slot-scope="{row}">
            <div class="avatar-image">
              <el-image :src="row.user.avatar" lazy :fit="'cover'">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机">
          <template slot-scope="{row}">
            <span>{{ row.user.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="{row}">
            <span>{{ row.user.nickname }}</span>
          </template>
        </el-table-column>

        <el-table-column label="参与时间">
          <template slot-scope="{row}">
            <span>{{ row.create_time }}</span>
          </template>
        </el-table-column>

        <el-table-column label="中奖">
          <template slot-scope="{row}">
            <span>{{ +row.win === 1 ? '中奖' : '' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="需要发货">
          <template slot-scope="{row}">
            <span>{{ +row.win === 1 ? '是' : '' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单ID">
          <template slot-scope="{row}">
            <span>{{ row.order_id }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="100"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button type="success" size="mini" @click="$router.push(`/order/order-view/${row.order_id}`)">
              操作订单
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
    <el-card v-if="group.commission && group.commission.length > 0">
      <h1>佣金:</h1>
<!--      <br>
      <ul>
        <li
          v-for="(item, index) in group.commission"
          :key="index"
        >
          <p>用户ID: {{ item.user_id }}</p>
          <p>奖金: {{ +item.balance }}</p>
          <p>积分: {{ +item.score }}</p>
          <p>购物券: {{ +item.ticket }}</p>
          <p>平台券: {{ +item.platform_ticket }}</p>
          <p>奖名: {{ item.award_name }}</p>
          <p>状态: {{ +item.status === 1 ? '已返' : '待返' }}</p>
          <br>
        </li>
      </ul>-->
      <el-table
        v-if="group.commission"
        :data="group.commission"
        fit
        style="width: 100%;"
      >
        <el-table-column label="用户ID">
          <template slot-scope="{row}">
            <span>{{ row.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="余额">
          <template slot-scope="{row}">
            <span>{{ +row.balance }}</span>
          </template>
        </el-table-column>
        <el-table-column label="积分">
          <template slot-scope="{row}">
            <span>{{ +row.score }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购物券">
          <template slot-scope="{row}">
            <span>{{ +row.ticket }}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠劵">
          <template slot-scope="{row}">
            <span>{{ +row.platform_ticket }}</span>
          </template>
        </el-table-column>
        <el-table-column label="奖名">
          <template slot-scope="{row}">
            <span>{{ row.award_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{row}">
            <span>{{ +row.status === 1 ? '已返' : '待返' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'OrderView',
  filters: {
  },
  data() {
    return {
      group: {},
      item: {}
    }
  },
  methods: {
    fetchData() {
      api.order.groupView({ id: this.$route.params.id }).then(response => {
        this.group = response.data.group
        this.item = response.data.item
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.app-container {
  font-size: 12px;

  h1 {
    font-size: 14px;
  }

  .el-card {
    margin-bottom: 10px;
    ul {
      padding: 0;
      li {
        list-style: none;
      }
    }
  }

  .avatar {
    .el-image {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }

  .main-image {
    .el-image {
      width: 100px;
      height: 100px;
    }
  }

  .avatar-image {
    .el-image {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }

  .top {
    display: flex;
    .user {
      flex: 1;
    }
    .product {
      flex: 2.5;
      margin-left: 10px;
    }
  }
}
</style>
